<script src="<?= image_url('/static/assets/global/scripts/echarts.min.js') ?>"></script>
<style>
    .page-bar .pull-right {
        display: none;
    }

    .left-float {
        float: left;
    }
</style>
<?php $this->load->view('partials/breadcrumb.tpl') ?>
<div class="row" style="margin-bottom: 15px;">
    <div class="col-md-12">
        <div class="left-float input-group input-large date-picker input-daterange" data-date=""
             data-date-format="yyyy-mm-dd">
            <input type="text" class="form-control" name="stock_time_begin" placeholder="开始时间"
                   autoComplete="off">
            <span class="input-group-addon">to </span>
            <input type="text" class="form-control" name="stock_time_end" placeholder="结束时间"
                   autoComplete="off">
        </div>
        <div class="form-group" style="float: left;margin: 0 10px;">
            <label class="sr-only">选择仓库</label>
            <select name="warehouse" class="form-control input-xs">
                <option selected="selected" value="0">总库存</option>
                <option value="1">合肥库</option>
                <option value="2">深圳库</option>
            </select>
        </div>
        <div class="form-group" style="float: left;margin: 0 10px;">
            <label class="sr-only">所属账户</label>
            <select name="shop_id" class="form-control input-xs">
                <option selected="selected" value="0">所属账户...</option>
                <?php foreach ($allShop as $k => $v): ?>
                <option value="<?= $k ?>"><?= $v ?></option>
                <?php  endforeach; ?>
            </select>
        </div>
        <div class="form-group" style="float: left;margin: 0 10px;">
            <label class="sr-only">所属销售组</label>
            <select name="group_id" class="form-control input-xs">
                <option selected="selected" value="0">所属销售组...</option>
                <?php foreach ($allGroups as $k => $v): ?>
                    <option value="<?= $k ?>"><?= $v ?></option>
                <?php  endforeach; ?>
            </select>
        </div>

        <button type="button" class="btn default left-float" id="reset">重置</button>
        <button type="button" id="search" class="btn green about_search left-float">搜索 <i class="fa fa-search"></i>
        </button>
    </div>
</div>
<div class="row">
    <div class="col-md-10" id="echart" style="height:400px;margin-top: 20px;"></div>
    <div class="col-md-2 alert alert-info text-center" id="line-data" style="height:400px;margin-top: 20px;">

    </div>
    <div class="col-md-10" id="echartCircle" style="height:400px;margin-top: 20px;"></div>
    <div class="col-md-2 alert alert-info text-center" id="desc-asc" style="height:400px;margin-top: 20px;"></div>
</div>
<script>
    function ajaxTaskData(url, chartId, data, successCallback) {
        $.ajax({
            url: url,
            data: data,
            method: 'POST',
            dataType: 'json',
            success: function (res) {
                if (res.success) {
                    successCallback(res.data);
                } else {
                    console.log(res);
                }
            },
            fail: function (res) {
                console.log('error')
            }
        });
    }

    $(document).ready(function () {
        //重置按钮
        $("#reset").click(function () {
            var SelectArr = $("select");
            $("input[type='text']").val('');
            SelectArr.val(0);
        });
        //图表信息
        var myChart = echarts.init(document.getElementById('echart'), 'dark');
        var myChartCircle = echarts.init(document.getElementById('echartCircle'), 'dark');
        optionLine = {
            title: {
                text: '库存金额(元)'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                // data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        optionCircle = {
            title: {
                text: '出入库金额(元)'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['出库', '入库']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value'
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                }
            ],
            series: [
                {
                    name: '入库',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true
                        }
                    }
                },
                {
                    name: '出库',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'left'
                        }
                    }
                }
            ]
        };
        var searchData = {
            'time_begin': $("input[name='stock_time_begin']").val(),
            'time_end': $("input[name='stock_time_end']").val(),
            'stock': $("select[name='warehouse']").val(),
            'shop_id': $("select[name='shop_id']").val()
        };
        searchData.type = 'init';
        ajaxTaskData('<?= site_url('storage/stock/ajaxStockLine') ?>', 'myChart', searchData, function (data) {
            var html = '<h4>当前库存金额(元)</h4>';
            for (var i = 0; i < data.data.length; i++) {
                html += '<div style="font-size: 15px;margin-top: 6px;">' + data.x[i] + '： <span>' + data.data[i] + '元</span></div>'
            }
            $("#line-data").html(html);
            optionLine.xAxis.data = data.x;
            optionLine.series[0].data = data.data;
            myChart.setOption(optionLine);
        });
        ajaxTaskData('<?= site_url('storage/stock/ajaxStockCircle') ?>', 'myChartCircle', searchData, function (data) {
            var html = '<h4>最近库存变动(元)</h4>';
            for (var i = 0; i < data.asc.length; i++) {
                html += '<div style="font-size: 15px;margin-top: 6px;">' + data.x[i] + '： <span>' + parseInt(data.asc[i]+ data.desc[i]) + '元</span></div>'
            }

            $("#desc-asc").html(html);
            optionCircle.yAxis[0].data = data.x;
            optionCircle.series[0].data = data.asc;
            optionCircle.series[1].data = data.desc;
            myChartCircle.setOption(optionCircle,true);
        });

        $("#search").click(function () {
            var stock_time_begin = $("input[name='stock_time_begin']").val();
            var stock_time_end = $("input[name='stock_time_end']").val();
            var warehouse = $("select[name='warehouse']").val();
            var shop_id = $("select[name='shop_id']").val();

            //验证非空
            if (!stock_time_begin || !stock_time_end || !warehouse) {
                toastr.error('请选择筛选时间段！');
                return;
            }
            var searchData = {
                'time_begin': stock_time_begin,
                'time_end': stock_time_end,
                'stock': warehouse,
                'shop_id':shop_id
            };
            searchData.type = 'search';
            ajaxTaskData('<?= site_url('storage/stock/ajaxStockLine') ?>', 'myChart', searchData, function (data) {
                var html = '<h3>当前库存金额</h3>';
                for (var i = 0; i < data.data.length; i++) {
                    html += '<div style="font-size: 15px;margin-top: 6px;">' + data.x[i] + '： <span>' + data.data[i] + '元</span></div>'
                }
                console.log(html);
                $("#line-data").html(html);
                optionLine.xAxis.data = data.x;
                optionLine.series[0].data = data.data;
                myChart.setOption(optionLine, true);
            });
            ajaxTaskData('<?= site_url('storage/stock/ajaxStockCircle') ?>', 'myChart', searchData, function (data) {
                var html = '<h4>最近库存变动(元)</h4>';
                for (var i = 0; i < data.asc.length; i++) {
                    html += '<div style="font-size: 15px;margin-top: 6px;">' + data.x[i] + '： <span>' + parseInt(data.asc[i]+ data.desc[i]) + '元</span></div>'
                }

                $("#desc-asc").html(html);
                optionCircle.yAxis[0].data = data.x;
                optionCircle.series[0].data = data.asc;
                optionCircle.series[1].data = data.desc;
                myChartCircle.setOption(optionCircle, true);
            });
        });
    });
</script>